import React from 'react'
import PropTypes from 'prop-types'
import {
  
  StyleSheet,
  Text
} from 'react-native'
import { ONE_PIXEL } from '@/utils/ScreenUtil'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from './CustomButton'
const arrowRight = require('@/imgC/userinfo/arrow_black_right.png')
export default class CustomInputLabel extends React.PureComponent {
  static propTypes = {
    title: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    placeHolder: PropTypes.string,
    onPress: PropTypes.func,
    params: PropTypes.any,
    last: PropTypes.bool,
    children: PropTypes.node,
    style: PropTypes.object
  }

  render () {
    const {
      style, title, value, placeHolder, last, children
    } = this.props
    return (
      <CustomButton style={[styles.container, style, last && styles.last]} onPress={this._onPress}>
        <Text style={styles.title}>{title}</Text>
        {children}
        {!children && <Text style={[styles.placeHolder, value && styles.value]}>{value || placeHolder}</Text>}
        {!children && <CustomImage style={styles.arrowRight} source={arrowRight} />}
      </CustomButton>
    )
  }

  _onPress = () => {
    const {
      onPress,
      params
    } = this.props
    onPress && onPress(params)
  }
}
const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: ScaleS(76),
    flexDirection: 'row',
    alignItems: 'center',
    borderColor: '#EFEFEF',
    borderStyle: 'solid',
    borderBottomWidth: ONE_PIXEL
  },
  last: {
    borderBottomWidth: 0
  },
  title: {
    flex: 1,
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '600'
  },
  placeHolder: {
    fontSize: ScaleT(16),
    color: '#999999'
  },
  value: {
    color: '#444444'
  },
  arrowRight: {
    marginLeft: ScaleS(16),
    width: ScaleS(8),
    height: ScaleS(13)
  }
})
